<template>
	<view class="warpper">
	<!-- 	<u-navbar :title="$t('order.Initiate-Consignment')" bgColor="#ffffff" @leftClick="goback"
			titleStyle="font-size: 32rpx;font-weight: 500;color: #000000;" placeholder>
		</u-navbar> -->
		<u-navbar title="发布兑换" bgColor="#ffffff" @leftClick="goback"
			titleStyle="font-size: 32rpx;font-weight: 500;color: #000000;" placeholder>
		</u-navbar>
		<view class="title">

		</view>

		<view class="cell-line item-OTC " :class="{'cell-line-active': currentType == 'CashOut'}"
			@click="changeCurrentType('CashOut')">
			<image :src="currentType == 'CashOut' ? imgUrl.selectIcon : imgUrl.unselectIcon" mode="" class="select-icon">
			</image>
			<!-- {{$t('order.Cash-Out')}} -->
			提现
			<image :src="currentType == 'CashOut' ? imgUrl.cash_xuanzhong : imgUrl.cash_weixuan" mode=""
				class="background-icon"></image>
		</view>
		<view style="height: 40rpx;"></view>
		<view class="cell-line item-exchange" :class="{'cell-line-active': currentType == 'Exchange'}"
			@click="changeCurrentType('Exchange')">
			<image :src="currentType == 'Exchange' ? imgUrl.selectIcon : imgUrl.unselectIcon" mode="" class="select-icon">
			</image>
			<!-- {{$t('order.Exchange')}} -->
			兑换
			<image :src="currentType == 'Exchange' ? imgUrl.exchange_xuanzhong : imgUrl.exchange_weixuan" mode=""
				class="background-icon"></image>
		</view>

		<view class="bottom-box">
			<view class="bottom-box__btn" @click="nextHandle">
				{{$t('index.Next')}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'release',
		data() {
			return {
				imgUrl: {
					selectIcon: require('@/static/image/bourse/select.png'),
					unselectIcon: require('@/static/image/bourse/unselect.png'),
					cash_xuanzhong: require('@/static/image/bourse/cash_xuanzhong.png'),
					cash_weixuan: require('@/static/image/bourse/cash_weixuan.png'),
					exchange_weixuan: require('@/static/image/bourse/exchange_weixuan.png'),
					exchange_xuanzhong: require('@/static/image/bourse/exchange_xuanzhong.png'),
				},
				currentType: 'CashOut', // Exchange CashOut
				urlIndex: "releaseBourse"
			}
		},
		// 监听页面返回
		onBackPress(options) {
			if (options.from === "navigateBack") {
				return false;
			}
			// this.leftClick(this.urlIndex)
			this.goBack();
			return true;
		},
		methods: {
			goback() {
				uni.redirectTo({
					url: '/pagesUser/bourse/bourse'
				})
			},
			changeCurrentType(val) {
				this.currentType = val
			},
			nextHandle() {
				if (this.currentType == 'CashOut') {
					uni.navigateTo({
						url: '/pagesUser/bourse/releaseCashOut'
					})
				} else if (this.currentType == 'Exchange') {
					uni.navigateTo({
						url: '/pagesUser/bourse/releaseExchange'
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.warpper {
		font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #878787;
		padding: 0 30rpx;

		.title {
			margin: 40rpx 0;
		}


		.cell-line {
			position: relative;
			display: flex;
			align-items: center;
			width: 690rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 2rpx solid #f6f6f6;
			font-size: 36rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.select-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}

			.background-icon {
				position: absolute;
				bottom: 0;
				right: 30rpx;
				width: 192rpx;
				height: 130rpx;
			}
		}

		.cell-line-active {
			color: rgba(0, 0, 0, 0.8);
			border: 2rpx solid #61bdb2;
			box-shadow: 0px 8rpx 40rpx 0px #ecf3f2;
		}

		.bottom-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			padding: 10rpx 30rpx;
			background-color: #FFFFFF;

			&__btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 690rpx;
				height: 80rpx;
				color: #FFFFFF;
				background: #61BDB2;
				border-radius: 80rpx;
			}
		}
	}
</style>